<template>
  <div class="box">
    <div class="top-search">
      <el-form :model="queryParams" ref="queryForm" label-width="100px" >
        <el-row :gutter="50">
          <el-col :span="6">
            <el-form-item label="年度" prop="annualOverhaulYear">
              <el-select    @change="getQuery" v-model="queryParams.annualOverhaulYear" placeholder="请选择年度">
                <el-option v-for="dict in yearList" :key="dict" :value="dict" :label="dict" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单位名称" prop="annualOverhaulOrgId">
              <el-select    v-model="queryParams.annualOverhaulOrgId" @change="getQuery" placeholder="请选择单位名称">
                <el-option v-for="dict in orgList1" :key="dict.id" :value="dict.id" :label="dict.name" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目名称" prop="annualOverhaulId">
              <el-select    v-model="queryParams.annualOverhaulId" placeholder="请选择项目名称">
                <el-option v-for="dict in handleProject(queryParams.annualOverhaulYear, queryParams.annualOverhaulOrgId)" :key="dict.id" :value="dict.id" :label="dict.overhaulName" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="searchFromButton" label-width="0">
              <but type="5" name="重置" @change="resetList" />
              <but name="查询" v-hasPermi="['web:shgl:shlcgl:sjgl:query']" @change="searchList" />
              <cut-is-show @clickShow="isShow = !isShow"></cut-is-show>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="isShow" style="margin-top: 15px;" :gutter="50">
          <el-col :span="6">
            <el-form-item label="审批类型" prop="grade">
              <el-cascader :options="optionsList" :props="casProps"  v-model="queryParams.moduleId" :show-all-levels="false"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="审批状态" prop="status">
              <el-select    v-model="queryParams.status" placeholder="请选择审批状态">
                <el-option v-for="dict in statusList" :key="dict.id" :value="dict.id" :label="dict.name" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="提交人" prop="cuser">
              <el-input v-model="queryParams.cuser" placeholder="请输入提交人"   @keyup.enter.native="searchList" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="isShow" style="margin-top: 15px;" :gutter="50">
          <el-col :span="6">
            <el-form-item label="提交时间" prop="pickerValue">
              <el-date-picker @change="getPicker" v-model="pickerValue" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="box-content">
      <table-key :tableCol="tableCol" @freeClick="getList">
        <template>
          <but type="2" v-hasPermi="['web:shgl:shlcgl:sjgl:print']" width name="批量导出" @change="fileGet" />
        </template>
      </table-key>
      <hu-table :tableData="tableData" :loading="loading" :tableCol="tableCol">
        <template v-slot:operate="{ row }">
          <el-button type="text" @click="handleUpdate(row)">详情</el-button>
        </template>
      </hu-table>
      <paging :total='total' :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination='getList'></paging>
    </div>

    <hu-modal title="查看审核状态" :show-modal.sync="showModal" :loading="loading" :submit="false">
      <herder-audit :rowTaskId="rowTaskId" />
      <el-tabs v-model="activeName" style="margin-top: 5px;">
        <el-tab-pane label="基本资料" name="0">
          <essential-item :auditList="auditList"></essential-item>
        </el-tab-pane>
        <el-tab-pane label="审批信息" name="1">
          <div style="display: flex;">
            <div>
              <audit :rowTaskId="rowTaskId" />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </hu-modal>
  </div>
</template>
<script>
import { mapTree } from "@/utils/onUtils.js";
import essentialItem from "@/views/components/audit/essentialItem.vue";
import Audit from "../../components/audit/audit.vue";
import herderAudit from "../../components/audit/herderAudit.vue";
import * as http from "@/api/audit/monitoring/control";
export default {
  components: {
    Audit,
    essentialItem,
    herderAudit,
  },
  name: "AuditMonitoringControl",
  dicts: [],
  data() {
    return {
      activeName: "0",
      statusList: [
        {
          name: "执行中",
          id: 2,
        },
        {
          name: "已完成",
          id: 3,
        },
        {
          name: "驳回",
          id: 5,
        },
        {
          name: "已驳回",
          id: 6,
        },
        {
          name: "已撤回",
          id: 7,
        },
      ],
      casProps: {
        value: "id",
        label: "name",
        children: "children",
      },
      optionsList: [],
      isShow: false, // 切换搜索按键
      loading: true, // 加载
      // list 参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0, // table total
      // table Col
      tableCol: [
        {
          title: "序号",
          type: "index",
          align: "center",
          showOverflowTooltip: false,
          width: "55",
          show: true,
        },
        {
          title: "年度",
          key: "overhaulYear",
          width: "70",
          show: true,
        },
        {
          title: "单位名称",
          key: "companyName",
          width: "150",
          show: true,
        },
        {
          title: "项目名称",
          key: "overhaulName",
          width: "150",
          show: true,
        },
        {
          title: "审批类型",
          key: "module",
          show: true,
        },
        {
          title: "提交人",
          key: "cuser",
          show: true,
        },
        {
          title: "提交时间",
          key: "ctime",
          show: true,
        },
        {
          title: "当前处理节点",
          key: "taskPointName",
          show: true,
        },
        {
          title: "审核状态",
          key: "statusName",
          show: true,
        },
        {
          title: "操作",
          slot: "operate",
          fixed: "right",
          show: true,
        },
      ],
      tableData: [], // table Data
      showModal: false, // 弹窗
      rowTaskId: undefined,
      auditList: {},
      pickerValue: undefined, // 时间
    };
  },
  created() {
    this.getList();
    this.getOption();
  },
  methods: {
    // get 系统模块
    getOption() {
      let treeList = this.$store.getters.resourceTree;
      if (treeList && treeList.children && treeList.children.length) {
        this.optionsList = mapTree(treeList.children);
      }
    },
    // 列表 List
    getList() {
      this.loading = true;
      let params = {
        ...this.queryParams,
        moduleId: this.queryParams.moduleId
          ? this.queryParams.moduleId[this.queryParams.moduleId.length - 1]
          : undefined,
        // overhaulIds: this.getOverhaulIds
      };
      http.getList(params).then(({ stateCode, result }) => {
        if (stateCode == 200) {
          this.loading = false;
          this.tableData = result.records;
          this.total = result.total;
        }
      });
    },
    resetList() {
      this.queryParams = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
      };
      this.pickerValue = undefined;
    },
    // 查询 list
    searchList() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // Update 弹出
    handleUpdate(row) {
      http.getDetails(row.id).then(({ result }) => {
        this.rowTaskId = result.id;
        this.auditList = {
          businessKey: result.businessKey,
          moduleId: result.moduleId,
        };
        this.showModal = true;
      });
    },
    // 搜索时间
    getPicker(arrDate) {
      this.queryParams.startTime = arrDate ? arrDate[0] : undefined;
      this.queryParams.endTime = arrDate ? arrDate[1] : undefined;
    },
    // 导出文件
    fileGet() {
      let params = {
        ...this.queryParams,
        pageNum: undefined,
        pageSize: undefined,
        moduleId: this.queryParams.moduleId
          ? this.queryParams.moduleId[this.queryParams.moduleId.length - 1]
          : undefined,
        // overhaulIds: this.getOverhaulIds
      };
      http.exportList(params).then((result) => {
        this.$download.saveAs(result, "审批数据管理.xls");
        this.$modal.msgSuccess("导出成功");
      });
    },
  },
};
</script>
